import React, { Component } from 'react'
import PaginationTable from 'components/PaginationTable'
import { actions } from 'mirrorx';
import { Button, Table, Checkbox, Loading,Radio,ButtonGroup,Popconfirm } from 'tinper-bee';
import { FormattedMessage, injectIntl } from 'react-intl';
import Grid from 'components/Grid';
import DelModal from 'components/DelModal';
import ApproveSteps from 'components/ApproveSteps';
import Alert from 'components/Alert';
import 'react-viewer/dist/index.css';
import SearchAreaForm from '../SearchArea';
import sum from "bee-table/build/lib/sum.js";
import multiSelect from "bee-table/build/lib/multiSelect.js";
import dragColumn from 'bee-table/build/lib/dragColumn';
import { deepClone, getPageParam,handleSearchValue,isEmptyObj,StringData } from "utils";
import {mainTableColumn,SelectCode,searchField} from '../InitTemplate';
import './index.less'

let ComplexTable = multiSelect(dragColumn(sum(Table)), Checkbox);
class PurchaseOrderTraceFormPaginationTable extends Component {
    constructor(props) {
        super(props);
        this.state = {
            // 表格中所选中的数据，拿到后可以去进行增删改查
            showModal: false,
            ModalVisible:false,
            selectData: [],
        }

    }


    componentDidMount() {
        // actions.PurchaseOrderTraceForm.loadList(this.props.queryParam);//table数据
        if(SelectCode && SelectCode.length>0) {
            actions.PurchaseOrderTraceForm.getSelectData(SelectCode);
        }
    }
    /**
     * 编辑,详情，增加
     */



    cellClick = async (record, btnFlag) => {
        await actions.PurchaseOrderTraceForm.updateState({
            rowData: record,
        });

        let id = "";
        if (record) {
            id = record["id"];
        }
        actions.routing.push(
            {
                pathname: 'ReceiptDeal-edit',
                search: `?search_id=${id}&btnPageFlag=${btnFlag}`
            }
        )
    }

   

    freshData = (pageIndex) => {
        this.onPageSelect(pageIndex, 0);
    }

    /**
     *
     * @param {*} index 跳转指定页数
     * @param {*} value 设置一页数据条数
     */
    onDataNumSelect = (index, value) => {
        this.onPageSelect(value, 1);
    }

    /**
     *
     * @param {Number} value  pageIndex 或者 pageIndex
     * @param {Number} type 为0标识为 pageIndex,为1标识 pageSize
     */
    onPageSelect = (value, type) => {
        let queryParam = deepClone(this.props.queryParam);
        queryParam['pageParams'] = getPageParam(value, type, queryParam.pageParams);
        this.setState({ selectedIndex: 0 }); //默认选中第一行
        actions.PurchaseOrderTraceForm.loadList(queryParam);
    }

    /**
     *
     * @param {*} selectData 点击多选框回调函数
     */
    getSelectedDataFunc = (selectData, record, index) => {
        this.setState({ selectData });
        let { list } = this.props;
        let _list = deepClone(list);
        //当第一次没有同步数据
        // if (this.oldData.length == 0) {
        //     this.oldData = deepClone(list);
        // }
        //同步list数据状态
        if (index != undefined) {
            _list[index]['_checked'] = !_list[index]['_checked'];
        } else {//点击了全选
            if (selectData.length > 0) {//全选
                _list.map(item => {
                    if (!item['_disabled']) {
                        item['_checked'] = true
                    }
                });
            } else {//反选
                _list.map(item => {
                    if (!item['_disabled']) {
                        item['_checked'] = false
                    }
                });
            }
        }
        //queryDetailObj.list = _list;
        actions.PurchaseOrderTraceForm.updateState({ list: _list });
        this.forceUpdate()
    }

    exportExcel = (selIndex) => {
        let  {queryParam } = this.props;
        queryParam = handleSearchValue(queryParam,searchField);
        delete queryParam.size;
        delete queryParam.page;
        let param = isEmptyObj(queryParam) && StringData(queryParam) || "";
        window.open(`${GROBAL_HTTP_CTXR}mrjt/ncquery/poorder/exportAll?${param}`);
    }


    render() {
        let { list, showLoading, pageIndex, pageSize, totalPages, total } = this.props;
        let { selectData} = this.state;
    
        let paginationObj = {   // 分页
            activePage: pageIndex,//当前页
            total: total,//总条数
            size:pageSize,
            items: totalPages,
            freshData: this.freshData,
            onDataNumSelect: this.onDataNumSelect,
        }

        let sortObj = {
            mode: 'multiple',
            backSource: true
        }
        
        return (
            <div className='PurchaseOrderTraceForm-root'>
                <SearchAreaForm
                    {...this.props}
                />
                <div className='button-header'>
                    <Button 
                        shape='border' 
                        style={{"marginLeft":15}} 
                        onClick={this.exportExcel}>
                        导出
                    </Button>
                </div>
                <div className="table-wrapper">
                    <ComplexTable
                        ref={(el) => this.grid = el} //存模版
                        data={list}
                        rowKey={(r, i) => i}
                        columns={mainTableColumn}
                        headerScroll={true}
                        getSelectedDataFunc={this.getSelectedDataFunc}
                        paginationObj={"none"}
                        dragborder={true} 
                        multiSelect={{ type: "none" }}
                        showHeaderMenu={true}
                        sort={sortObj} //后端排序
                        loading={{ show: showLoading, }}
                        scroll={{ y: 420 }}
                        sheetHeader={{ height: 30, ifshow: false }}
                        rowClassName={(record,index,indent)=>{
                            if (this.state.selectedRowIndex == index) {
                                return 'selected';
                            } else {
                                return '';
                            }
                        }}
                        onRowClick={(record,index,indent)=>{
                            this.setState({ 
                                selectedRowIndex: index
                            });
                        }}
                    />
                </div>
            </div>

        )

    }
}

export default injectIntl(PurchaseOrderTraceFormPaginationTable)